<template>
  <div>
    <el-form ref="pwdFormRef" :rules="pwdRules" label-width="auto" status-icon :model="httpsForm"
      label-position="right">
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
        <el-form-item label="请输入证书" prop="httpsfile">
          <el-input v-model="httpsForm.httpsfile" placeholder="请输入证书" clearable />
        </el-form-item>
      </el-col>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
        <el-form-item label="请输入证书秘钥" prop="httpskey">
          <el-input v-model="httpsForm.httpskey" placeholder="请输入证书秘钥" clearable />
        </el-form-item>
      </el-col>
    </el-form>

    <div class="buttonbox">
      <el-button @click="DelForm">重置</el-button>
      <el-button type="primary" @click="httpsConfirm"> 确认 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits } from "vue";
import { additionHttp } from "@/api/user";
import { message } from "@/utils/message";
const emit = defineEmits(["off"]);
const props = defineProps({
  info: Object
});
let httpsForm = ref({
  httpsfile: "",
  httpskey: ""
});
const pwdFormRef = ref<any>();

const pwdRules = reactive({
  httpsfile: [{ required: true, message: "请输入证书", trigger: "change" }],
  httpskey: [{ required: true, message: "请输入证书秘钥", trigger: "change" }]
});
// 确认
const httpsConfirm = () => {
  if (!pwdFormRef.value) return;
  (pwdFormRef.value as any).validate(async (valid: any) => {
    if (valid) {
      await additionHttp({
        connect_id: props.info.connect_id,
        crt_file_content: httpsForm.value.httpsfile,
        pem_file_content: httpsForm.value.httpskey,
        container_id: props.info.container_id
      }).then((res: any) => {
        DelForm();
        if (res.data.code == 200) {
          message("添加成功！", { type: "success" });
          close();
        } else {
          message(res.data.msg, { type: "error" });
        }
      });
    }
  });
};
// 重置
const DelForm = () => {
  httpsForm.value = {
    httpsfile: "",
    httpskey: ""
  };
};
const close = () => {
  emit("off");
};
</script>

<style scoped>
.buttonbox {
  float: right;
}
</style>
